<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品展示</title>
		
		<!-- 导入样式 -->
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-table.min.css"/>
		<!-- 导入js -->
		<script src="js/jquery.min.js"></script>
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="bootstrap/js/bootstrap-table-zh-CN.min.js" type="text/javascript" charset="utf-8"></script>
<!--		bootstrapTable-->

		<script type="text/javascript">
			
			$(function(){
				
				//查询
				var query_sel = $("#query_sel");
				
				// 数据表格加载数据
				$("#data_table").bootstrapTable({
					url: "product/queryAll",
					pagination: true,
					pageSize: 5,
					striped: true,
					//client 客户端分页
					sidePagination: 'client',
					height: 500,
					
					queryParams: function() {
						return {
							productname: $("#query_productname").val()
						}
					},
										
					columns:[{
						checkbox: true,
						visible: false                  //是否显示全选框
					}, 
					{
						// 映射json对象里的属性
						  field: 'pid',
						  // 文字居中
						  align: 'center',
						  // 列标题
						  title: '产品编号'
					},{
						// 映射json对象里的属性
						field: 'productname',
						// 文字居中
						align: 'center',
						// 列标题
						title: '产品名称'
					},{
						// 映射json对象里的属性
						field: 'quantity',
						// 文字居中
						align: 'center',
						// 列标题
						title: '库存'
					},{
						// 映射json对象里的属性
						field: 'address',
						// 文字居中
						align: 'center',
						// 列标题
						title: '地址'
					},{
						// 映射json对象里的属性
						field: 'price',
						// 文字居中
						align: 'center',
						// 列标题
						title: '价格'
					},{
						// 映射json对象里的属性
						field: 'pid',
						// 文字居中
						align: 'center',
						// 列标题
						title: '操作',
						formatter: function (value, row, index) {   //自定义组件
							var pid = value;
							var result = "";
							result += '<input type="text" name="" value="" placeholder="请输入销售数量" />&nbsp;&nbsp;&nbsp;';
							result += '<button type="button" onclick="sale('+ pid + ')" class="btn btn-outline-danger btn-sm">销售</button>';
							return result;
						}
					}],
					
				});
				
				//查询选择框点击事件
				$("#sel_btn").click(function() {
					// 刷新数据表格
					$("#data_table").bootstrapTable('refresh');
				})
				
				
			});
			
		// 销售商品
		function sale(eid) {
		   

		}
			
			
		</script>

	</head>
	<body>

		<!-- 查询框 -->
		<div class="container " style="margin: 10px 150px;">
			
			<form action="#" id="sel_form" class="form-inline">
				<div class="form-group col-sm-4  col-md-offset-1">
					产品名称：<input class="form-control" id="query_productname" type="text" placeholder="请输入产品名称"/>
				</div>
				
				<button type="button" id="sel_btn">查询</button>
				
				
			</form>
		</div>
		
		<!-- 数据展示 -->
		<div class="container">
			<table id="data_table"></table>
		</div>
		
	</body>
</html>
